import React, { useEffect } from "react";
import { Button } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import IconFont from "@/components/IconFont";
import { getGoodsSkuLogPage, getGoodsSpuLogPage } from "@/pages/GoodsModule/shopGoods/service";
import useLogColumns from '../logColumns';
import ViewLogButton from "@/views/components/ViewLogButton";
import SelectActions from "@/views/components/SelectActions";

const ActionCreateSysGoodsResultModal = (props) => {
	const { goodsResultData, onCancel, isSkuType, handleCheckFailGoods } = props;

  const { successCount, failCount, skuCount, spuCount, failEcSkuIds } = goodsResultData || {};

  const text = isSkuType ? 'sku' : '款';

  const { columns, isSkuType: logIsSkuType, setTabValue } = useLogColumns([]);

  useEffect(() => {
    setTabValue(isSkuType ? 'sku' : 'spu')
  }, [isSkuType])

	return (
		<>
			<CommonModal
				title={{ title: "生成系统商品结果" }}
				open={true}
        onCancel={onCancel}
        footer={[
          <Button key="close" onClick={onCancel}>关闭</Button>,
          <Button key="checkFailGoods" disabled={!failEcSkuIds?.length} onClick={() => handleCheckFailGoods(failEcSkuIds)}>查看失败商品</Button>,
          <ViewLogButton
            key='checkLogs'
            tableKey={logIsSkuType ? "SKULogTable" : "SPULogTable"}
            columns={columns}
            width="1154px"
            height="544px"
            tableHeight={460}
            tableRequest={logIsSkuType ? getGoodsSkuLogPage : getGoodsSpuLogPage}
            searchSpan={6}
          >
            <SelectActions
              type="primary"
              onClick={() => {
                // 打开查看日志弹窗
              }}
            >
              查看日志
            </SelectActions>
          </ViewLogButton>,
        ]}
			>
        <div style={{ display: "flex", justifyContent: "center", fontSize: 64 }}><IconFont type="iconchenggong" /></div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 64 }}>
          <span>总数：{isSkuType ? skuCount : spuCount} {text}</span>
          <span>成功：<span className="common-color10">{successCount}</span> {text}</span>
          <span>失败：<span className="common-color9">{failCount}</span> {text}</span>
        </div>
			</CommonModal>
		</>
	);
}

export default ActionCreateSysGoodsResultModal;